<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" id="txt">
    <p id="show"></p>
  </div>
  <div id="app2">
    <input type="text" id="txt2">
    <p id="show2"></p>
  </div>
</body>
<script type="text/javascript">
  var obj = {}
  Object.defineProperty(obj, 'txt', {
      get: function () {
        // console.log('get obj')
          return obj
      },
      set: function (newValue) {
          document.getElementById('txt').value = newValue
          document.getElementById('show').innerHTML = newValue
          // console.log('set obj')
      }
  })
  document.getElementById('txt').addEventListener('keyup', function (e) {
      obj.txt = e.target.value
      // console.log(obj)
  })
  // obj.txt = 12
  
</script>
<script>
  let obj2 = {
    txt: ''
  }
  const data = new Proxy(obj2, {
    set: (target, key, value) => {
      document.getElementById('txt2').value = value;
      document.getElementById('show2').innerHTML = value;
      return true
    }
  })
  document.getElementById('txt2').addEventListener('keyup', function (e) {
    data.txt = e.target.value
      // console.log(obj)
  })
</script>
</html>